【Swift】Viewにぼかし効果を追加してみよう！

#Swift

リルオッサ

2021.07.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Viewにぼかし効果を追加しておしゃれな演出をしたかったので、Viewにぼかし効果を追加する方法を調べてみました。

環境

Xcode 12.5
Swift 5.4

はじめに

今回はview配下にimageViewを追加しており、このviewControllerのviewに対してぼかし効果を追加していき、どのような効果が付加されるかを検証していきたいと思います。

ぼかし効果を追加

ぼかし効果は、ほんの数行で追加が出来ます。

import UIKit

class BlurEffectSampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // ぼかし効果のスタイルを決め、エフェクトを生成
        let blurEffect = UIBlurEffect(style: .regular)

        // ぼかし効果を設定したUIVisualEffectViewのインスタンスを生成
        let blurEffectView = UIVisualEffectView(effect: blurEffect)

        // ぼかし効果Viewのframeをviewのframeに合わせる
        blurEffectView.frame = view.frame

        // viewにぼかし効果viewを追加
        view.addSubview(blurEffectView)
    }
}

UIVisualEffectView

UIVisualEffectViewを使用することで簡単にぼかし効果を追加することが出来ます。また、UIVisualEffectView(effect:)でUIBlurEffectを設定してあげることで様々なぼかし効果を演出することが出来ます。

UIBlurEffect

UIBlurEffectは、UIVisualEffectViewの背後にレイヤー化されたコンテンツにぼかし効果を適用するオブジェクトで、UIBlurEffect.styleには沢山の種類があり、選んだスタイルによって得られるぼかし効果は変わってきます。

UIBlurEffect.style

全部で20種類のスタイルがあります。

UIBlurEffect.styleのドキュメント上では全21種類でAdditional Stylesに6つのスタイルがあることになっていますが、Xcode 12.5では5つのスタイルの存在しか確認できませんでした。

Adaptable Styles
- systemUltraThinMaterial
- systemThinMaterial
- systemMaterial
- systemThickMaterial
- systemChromeMaterial
Light Styles
- systemUltraThinMaterialLight
- systemThinMaterialLight
- systemMaterialLight
- systemThickMaterialLight
- systemChromeMaterialLight
Dark Styles
- systemUltraThinMaterialDark
- systemThinMaterialDark
- systemMaterialDark
- systemThickMaterialDark
- systemChromeMaterialDark
Additional Styles
- regular
- light
- extraLight
- dark
- prominent